<template>
	<view class="content">
		<view class="info-input">
			<view class="img">
				<image class="pic" src="https://peixin.peiyu.online/xmk/images/汽车.png" mode="heightFix"></image>
			</view>
			<view class="ipt">
				<input placeholder="请输入产品条形码" placeholder-class="palce" v-model="barCode" />
				<image class="pic" src="https://peixin.peiyu.online/xmk/images/相机.png" mode="heightFix"
					@click="scan_code">
				</image>
			</view>
		</view>
		<view class="btn" @click="onclick">
			确认入库
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		api_product_addProductNum
	} from "../../../../../apis/apis.js"


	const barCode = ref(''); //条码内容
	const productId = ref(0)


	onLoad((e) => {
		console.log(e);
		productId.value = parseInt(e.id);
	});

	const scan_code = () => {
		// 调起条码扫描
		uni.scanCode({
			scanType: ['barCode'],
			success: (res) => {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				uni.showToast({
					title: "识别成功",
					icon: "success"
				});
				barCode.value = res.result;
			}
		});
	}

	//确认入库
	const onclick = () => {
		uni.showModal({
			title: "确认入库？",
			success: async (res) => {
				if (res.confirm) {
					try {
						let res = await api_product_addProductNum({
							id: productId.value,
							productCode: barCode.value
						});
						uni.showToast({
							title: "添加成功",
							icon: "success",
							success: () => {
								barCode.value = "";
							}
						});
					} catch (err) {
						uni.showToast({
							title: "错误",
							icon: "none"
						})
					}
				}
			}
		})

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100vh;
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);

		.info-input {
			width: 700rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50rpx;
			margin-top: 40vh;

			.img {
				width: 56rpx;
				height: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.pic {
					height: 46rpx;
				}
			}


			.ipt {
				width: 610rpx;
				height: 50rpx;
				border-bottom: 1rpx solid $border-color;
				display: flex;
				justify-content: space-between;
				align-items: center;

				input {
					flex-grow: 1;
					font-family: Alibaba_PuHuiTi_Thin;
					font-weight: 250;
					font-size: 34rpx;
					color: $font-primary-color;

					:deep() {
						.palce {
							font-family: Alibaba_PuHuiTi_Thin;
							font-weight: 250;
							color: #cecece
						}
					}
				}

				.txt {
					font-family: Alibaba_PuHuiTi_Thin;
					font-weight: 250;
					font-size: 34rpx;
					color: $primary-color;
					margin-right: 10rpx;
				}

				.pic {
					height: 46rpx;
					padding: 0 8rpx;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 75rpx;
			background: $primary-color;
			border-radius: 100rpx;
			border: none;
			color: white;
			font-weight: 300;
			font-size: 36rpx;
			font-family: Alibaba_PuHuiTi_Light;
			display: flex;
			justify-content: center;
			align-items: center;
			letter-spacing: 5rpx;
		}
	}
</style>